<template>
  <div>
    <admin-list
      :list="adminList"
      @assignPermissions="assignPermissions"
      @deleteAdmin="deleteAdmin"
      @addAdmin="addAdmin"
    />
    <roles-list
      ref="rolesList"
      :checked="activeUserRoles"
      @doAssignRole="doAssignRole"
    />
    <add-admin
      ref="addAdmin"
      @addAdmin="addAdminSubmit"
    />
  </div>
</template>

<script>
// 子组件
import AdminList from './ChildCpm/adminList'
import RolesList from './ChildCpm/rolesList'
import AddAdmin from './ChildCpm/addAdmin'
// api
import {
  getAdminList,
  deleteAdmin,
  doAssignRole,
  createAdmin
} from '@/api/admin'

export default {
  components: {
    AddAdmin,
    AdminList,
    RolesList
  },
  data() {
    return {
      adminList: [], // 所有管理员列表
      activeUserRoles: [], // 当前点击的用户的权限 用于展示用户的已拥有的权限
      activeUserId: null // 当前点击的用户的 id，用于设置权限和删除等
    }
  },
  created() {
    // 页面加载前，先请求所有管理员列表
    this.getAdminLists()
  },
  methods: {
    // 获取管理员列表
    getAdminLists() {
      getAdminList().then(res => {
        this.adminList = res
      })
    },
    // 在表头点击了添加管理员，我们需要弹出对话框
    addAdmin() {
      this.$refs.addAdmin.dialogVisible = true
    },
    // 添加管理员对话框输入完以后点击了提交按钮的事件
    addAdminSubmit(userInfo) {
      createAdmin(userInfo).then(res => {
        this.$message({
          type: 'success',
          message: res
        })
        this.getAdminLists() // 刷新列表
      }).catch(err => {
        this.$message({
          type: 'warning',
          message: err
        })
      })
    },
    // 表中点击了 某个（item）的权限分配
    assignPermissions(item) {
      // console.log('权限分配')
      this.activeUserId = item.ID // 保存当前用户信息
      this.activeUserRoles = item.Roles.split(' ') // 获取用户所有权限
      this.$refs.rolesList.dialogVisible = true // 拉起对话框
    },
    // 当分配完权限后点击了确定事件
    doAssignRole(value) {
      // 最高管理员权限不可修改
      if (this.activeUserId === 1) {
        this.$message({
          type: 'warning',
          message: '最高管理员权限禁止修改'
        })
        return
      }
      doAssignRole(this.activeUserId, value).then(res => {
        this.$message({
          type: 'success',
          message: res
        })
      }).catch(err => {
        this.$message({
          type: 'warning',
          message: err
        })
      })
      this.getAdminLists()// 修改完权限后，更新状态
    },
    // 点击了删除管理员
    deleteAdmin(item) {
      // console.log('删除管理员')
      // 先弹出对话框提示是否删除
      this.$confirm('此操作将删除该管理员, 是否继续?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 如果确定删除，那么就调用api
        if (item.ID === 1) { // 最高管理员禁止删除
          this.$message({
            type: 'warning',
            message: '最高管理员禁止被删除'
          })
          return
        }
        deleteAdmin(item).then(res => {
          // console.log(res)
          this.getAdminLists()
          this.$message({
            type: 'success',
            message: res.msg
          })
        }).catch(err => {
          // 删除失败就提示用户
          this.$message({
            type: 'warning',
            message: err
          })
        })
      }).catch(() => {
        // 取消提示已取消
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
